<template>
  <div>
    <el-button
      style="margin-bottom: 1rem"
      type="primary"
      @click="addHandler"
      >新增</el-button
    >
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="站点名称"
          align="center"
        ></el-table-column>
        <el-table-column
          label="中心里程"
          align="center"
          width="250"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.id !== ''">
              <p>DK{{ scope.row.mileageKm }}+{{ scope.row.mileageM }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="isDoing"
            label="是否在建"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="number"
            label="站点序号"
            align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
            <el-button
              type="text"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <el-dialog
      :title="editTitle"
      :visible.sync="editDialogStatus"
      width="30%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        style="width: 90%; margin: 0 auto"
        :model="editForm"
        label-width="150px"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="站台名称:">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="中心里程DK:"
          prop="mileageKm"
        >
          <el-col :span="8">
            <el-input v-model.number="editForm.mileageKm"></el-input>
          </el-col>
          <el-col
            :span="2"
            style="text-align: center"
          >
            +
          </el-col>
          <el-col :span="8">
            <el-form-item
              label=""
              prop="mileageM"
            >
              <el-input v-model.number="editForm.mileageM"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSaveHandler('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStation,
  saveStation,
  updateStation,
  deleteStation,
} from '/src/http/productSchedule/station.js'
import { autoClick } from '/src/utils/autoClick.js'
import { getDataType } from '/src/http/dictionary.js'
export default {
  data() {
    return {
      editDialogStatus: false,
      editTitle: '',

      lineTypeOptions: [],
      editForm: {
        lineType: '',
        rangeStartKm: null,
        rangeStartM: null,
        topSpeed: null,
        isDoing: false,
        number: null,
        remark: '',
      },
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
      rules: {
        lineType: [{ required: true, message: '选择线别', trigger: 'blur' }],
        rangeStartKm: [
          { required: true, message: '填写施工范围', trigger: 'blur' },
          { type: 'number', message: '施工范围必须为数字值' },
        ],
        rangeStartM: [
          { required: true, message: '填写施工范围', trigger: 'blur' },
          { type: 'number', message: '施工范围必须为数字值' },
        ],
        mileageKm: [
          { required: true, message: '填写施工范围', trigger: 'blur' },
          { type: 'number', message: '施工范围必须为数字值' },
        ],
        mileageM: [
          { required: true, message: '填写施工范围', trigger: 'blur' },
          { type: 'number', message: '施工范围必须为数字值' },
        ],
        topSpeed: [
          { required: true, message: '填写最高时速', trigger: 'blur' },
        ],
        speedLimitStart: [
          { required: true, message: '请选择日期', trigger: 'blur' },
        ],
        speedLimitEnd: [
          { required: true, message: '请选择时间', trigger: 'blur' },
        ],
      },
    }
  },

  mounted() {
    this.getDataTypeApi()
    this.getStationApi()
  },

  methods: {
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v
      this.getStationApi(this.currentPage, v)
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v
      this.getStationApi(v, this.pageSize)
    },

    addHandler() {
      this.editTitle = '新增'
      this.editDialogStatus = true
      this.editForm = {
        lineType: '',
        rangeStartKm: null,
        rangeStartM: null,
        mileageKm: null,
        mileageM: null,
        topSpeed: null,
        isDoing: false,
        number: null,
        remark: '',
      }
    },
    //   编辑
    editHandler(v) {
      console.log('edit::: ', v)
      this.editTitle = '编辑'
      // this.companyInput =

      this.editForm = JSON.parse(JSON.stringify(v))
      this.editDialogStatus = true
    },
    editSaveHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.editForm))

          if (this.editTitle === '新增') {
            this.$confirm('确认新增此条信息?', '提示', {
              confirmButtonText: '确定新增',
              cancelButtonText: '取消',
              type: 'info',
            })
              .then(() => {
                this.saveStationApi(params)
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消新增',
                })
              })
          } else {
            this.$confirm('确认编辑此条信息?', '提示', {
              confirmButtonText: '确定编辑',
              cancelButtonText: '取消',
              type: 'info',
            })
              .then(() => {
                this.updateStationApi(params)
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消编辑',
                })
              })
          }
          this.editDialogStatus = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 删除
    deleteHandler(v) {
      this.$confirm('此操作将永久删除该信息?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteStationApi({ idList: [v] })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      autoClick()
    },
    /**
     * 接口
     */
    // 查询所属线别
    getDataTypeApi() {
      getDataType({ type: 'ht_line_type' }).then((res) => {
        if (res.code == 200) {
          this.lineTypeOptions = res.data
        }
      })
    },
    // 分页查询超速路段
    getStationApi(pageNum = 1, pageSize = 10) {
      let params = { pageNum, pageSize }
      getStation(params).then((res) => {
        if (res.code == 200) {
          res.data.records.forEach((element) => {
            this.lineTypeOptions.forEach((i) => {
              if (i.value == element.lineType) {
                element.lineName = i.name
              }
            })
          })
          this.renderData = res.data.records
          console.log('====================================')
          console.log(this.renderData)
          console.log('====================================')
          this.total = res.data.total
          // 返回数据长度大于等于pageSize，不增加一行空白课可编辑区域
        }
      })
    },
    // id查询超速路段详情
    speedSectionDetailApi(params) {
      speedSectionDetail(params).then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
        }
      })
    },
    // 保存超速路段
    saveStationApi(params) {
      saveStation(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('保存成功')
          let pgn =
            Number.isInteger(this.total / this.pageSize) == true
              ? this.total / this.pageSize + 1
              : Math.ceil(this.total / this.pageSize)
          this.getStationApi(pgn, this.pageSize)
          this.currentPage = pgn
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 编辑超速路段
    updateStationApi(params) {
      updateStation(params).then((res) => {
        if (res.code == 200) {
          this.getStationApi(this.currentPage, this.pageSize)
          this.$message.success('编辑成功')
        }
      })
    },
    // 删除超速路段
    deleteStationApi(params) {
      deleteStation(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          if (this.renderData.length == 1 && this.total / this.pageSize > 1) {
            this.getStationApi(this.currentPage - 1, this.pageSize)
            this.currentPage = this.currentPage - 1
          } else {
            this.getStationApi(this.currentPage, this.pageSize)
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
//:deep(.el-input__inner) {
//border: none;
//  background-color: rgba(255, 255, 255, 0);
//}
//:deep(.el-textarea__inner) {
//  //   pointer-events: none;
//  border: none !important;
//  background-color: rgba(255, 255, 255, 0);
//  resize: none;
//} -->
</style>
